<template>
    <div class="box">
      <el-row>
        <el-col :span="3">
          
          <div class="grid-content2 bg-purple-light">
            <div style="padding-bottom:15px">报表列表</div>
            <el-tree 
              :data="treeData" 
              node-key="id"
              ref="tree"
              highlight-current
              :props="treeProps" 
              @node-click="handleNodeClick">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content1 bg-purple-light">
            <div style="padding-bottom:15px">{{checkTreeBbmc}}字段列表</div>
            <el-tree 
              :data="treeZdData" 
              empty-text="请选择报表"
              node-key="id"
              ref="treezd"
              :props="treeZdProps" 
              @node-click="handleNodeClickZd">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="bg-white grid-content">
            <el-table
              border
              stripe
              style="width: 100%; margin-bottom: 10px"
              :header-cell-style="{background:'#F5F7FA',color:'#909399'}"
            >
              <el-table-column 
                  align="center"
                  v-for="(item, index) in btList" 
                  :key="index" 
                  :label="item.lmc">
                  <el-table-column 
                      align="center"
                      v-for="(itemc, index) in item.children" 
                      :key="index" 
                      :label="itemc.lmc">
                      
                  </el-table-column>
              </el-table-column>
              <!-- <el-table-column prop="fwdm" label="服务代码" align="center"></el-table-column>
              <el-table-column prop="fwlx" label="服务类型" align="center"></el-table-column>
              <el-table-column prop="fwmc" label="服务名称" align="center" width="600"></el-table-column> -->
            </el-table>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <div class="mydiv">
              <div style="padding-top: 8px;">{{checkTreeBbmc}}属性管理</div>
              <el-button type="primary" @click = "addZdInfo()">新增</el-button>
            </div>
            
            <el-form :model="sxForm" class="demo-form-inline">
              <div style="padding:10px 0 10px 0">
                <table align="center" width="100%" class="table xunw_table_form" border="1">
                    <tbody>
                      <tr>
                          <th class="titlestyle">属性名称</th>
                          <th class="titlestyle">属性值</th>
                      </tr>
                      <tr>
                          <td  class="titlestyle">序号</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.lxh"></el-input></td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">上级字段</td>
                          <td  class="contentstyle">
                            <el-select
                              size="small"
                              v-model="sxForm.pid"
                              placeholder=""
                              @change="getInfo(sxForm.pid)"
                            >
                            <el-option label="无" value="0"></el-option>
                            <el-option
                              v-for="(item, index) in parentZdList"
                              :key="item.id"
                              :label="item.lmc"
                              :value="item.id"
                            />
                            </el-select>
                          </td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">名称</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.lmc"></el-input></td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">宽度</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.kd"></el-input></td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">高度</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.gd"></el-input></td>
                      </tr>
                      <!-- <tr>
                          <td  class="titlestyle">是否合并列</td>
                          <td  class="contentstyle">
                            <el-select
                              size="small"
                              v-model="sxForm.needMerge"
                              placeholder=""
                            >
                              <el-option label="是" value="1"></el-option>
                              <el-option label="否" value="0"></el-option>
                            </el-select>
                    </td>
                      </tr> -->
                      <!-- <tr>
                          <td  class="titlestyle">是否合并行</td>
                          <td  class="contentstyle">
                            <el-select
                              v-model="sxForm.my"
                              placeholder=""
                            >
                              <el-option label="是" value="是"></el-option>
                              <el-option label="否" value="否"></el-option>
                            </el-select>
                          </td>
                      </tr> -->
                      <tr>
                          <td  class="titlestyle">合并列数</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.szgs"></el-input></td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">背景</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.bgys"></el-input></td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">字体</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.zt"></el-input></td>
                      </tr>
                      <!-- <tr>
                          <td  class="titlestyle">符号</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.my"></el-input></td>
                      </tr> -->
                      <!-- <tr>
                          <td  class="titlestyle">数据源名称</td>
                          <td  class="contentstyle"><el-input size="small" v-model="sxForm.sjymc"></el-input></td>
                      </tr> -->
                      <tr>
                          <td  class="titlestyle">字段名称</td>
                          <td  class="contentstyle">
                            <el-select
                              size="small"
                              v-model="sxForm.sjfwInfoId"
                              placeholder=""
                            >
                            <el-option
                              v-for="(item, index) in sjyzdmc"
                              :key="item.id"
                              :label="item.zdbt"
                              :value="item.id"
                            />
                            </el-select>
                          </td>
                      </tr>
                      <tr>
                          <td  class="titlestyle">是否显示</td>
                          <td  class="contentstyle">
                            <el-select
                              size="small"
                              v-model="sxForm.isShow"
                              placeholder=""
                            >
                              <el-option label="是" value="1"></el-option>
                              <el-option label="否" value="0"></el-option>
                            </el-select>
                          </td>
                      </tr>
      
                    </tbody>
                </table>
              </div>
            
            </el-form>
            <!-- <el-button type="primary" @click = "cancelUpdate()">取消</el-button> -->
            <el-button v-if="isUpdate" type="primary" @click = "updateZdInfo()">修改</el-button>
            
            <el-button v-if="isAdd" type="primary" @click = "saveZdInfo()">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>

<script>
import bbmbApi from "@/api/dtbb/bbmb";
import sjfwApi from "@/api/dtbb/sjfw";
import infoApi from "@/api/dtbb/info";

export default{
  data(){
    return{
      treeData:[],
      treeZdData:[],
      zdData:[],
      btList:[],
      //树形控件的属性绑定对象
      treeProps: {
          children: 'children',
          label: 'bbmc',
          // label: (data, node) => {
          //   if (node.level === 1 || node.level === 2) {
          //     // 第一层lable为src_name字段
          //     return data.bbmc
          //   } else{
          //     // 第二三层lable为name字段
          //     return data.lmc
          //   }
          // },
      },
      treeZdProps: {
          children: 'children',
          label: 'lmc',

      },
      //获取点击的树形节点id
      checkTreeID:'',
      checkTreePid:'',
      checkTreeBbmc:'',
      checkZdTreeID:'',
      //列属性管理表格
      sxForm:{
        cj:'',
        sjwfInfoId:'',
        bbid:'',
        id:'',
        lxh:'',
        pid:'',
        lmc:'',
        kd:'',
        gd:'',
        needMerge:'',
        szgs:'',
        bgys:'',
        zt:'',
        sjymc:'',
        zdmc:'',
        isShow:'',
      },

      //查询出来的字段信息
      initData:{},

      sjyzdmc:[],
      parentZdList:[],

      isUpdate:true,
      isAdd:false,
    }
  },
  created(){

  },
  mounted(){
    this.searchTreeList();
  },
  methods: {
    /**
     * 查询树形列表
     */
     async searchTreeList() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await bbmbApi.getTreeList();
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.treeData = res.data;
      }
    },
    /**
     * 查询字段树形列表
     */
     async searchTreeListZd(bbid) {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await infoApi.getTreeList({bbid:bbid});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.treeZdData = res.data;
        this.btList = res.data;
      }
    },
    /**
     * 查询字段列表
     */
     async searchListZd(bbid) {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await infoApi.getList({bbid:bbid});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.treeZdData = res.data;
        this.parentZdList = res.data;
      }
    },
    /**
     * 根据字段id查询信息
     */
     async searchZdInfo(id) {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await infoApi.getList({id:id});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.zdData = res.data;
        console.log(res.data[0]);
        this.initData = res.data[0];
        this.sxForm = res.data[0];
        if(this.sxForm.pid == 0){
          this.sxForm.pid = this.sxForm.pid.toString();
        }
        this.sxForm.needMerge = this.sxForm.needMerge.toString();
        this.sxForm.isShow = this.sxForm.isShow.toString();
      }
    },

    //点击树形节点
    async handleNodeClick(data) {
      this.btList=[];
      console.log(data);
      this.sjfwid= data.sjfwIndexId;
      this.checkTreeID = data.id;
      this.checkTreePid = data.pid;
      this.checkTreeBbmc = data.bbmc;
      this.searchTreeListZd(data.id);
      this.searchListZd(data.id);

      let res = await sjfwApi.getListInfo({sjfwIndexId:data.sjfwIndexId});
    // // 判断是否成功
      if (res.success) {
        console.log(123);
        console.log(res.data);
        this.sjyzdmc = res.data.records;
        
      }
      // if(data.children.length===0){
      //   this.searchTreeListZd(data.id);
      //   let keys = this.$refs.tree.getCheckedKeys();
      //   console.log(keys);
      //   this.$refs.tree.updateKeyChildren(keys,this.treeZdData);
      // }

    },
    handleNodeClickZd(data){
      this.checkZdTreeID = data.id;
      console.log(data);
      this.searchZdInfo(data.id);
      this.isUpdate = true;
      this.isAdd = false;
    },
    async getInfo(val){
      console.log(val);
      let res = await infoApi.getList({id:val});
      if (res.success) {
        if(val=='0'){
          this.sxForm.cj = 1;
        }else{
          console.log(res.data);
          this.sxForm.cj = res.data[0].cj+1;
          
        }
        console.log(this.sxForm.cj);
      }
      
    },

    //修改字段信息
    async updateZdInfo(){
      let res = await infoApi.update(this.sxForm);
      if (res.success) {
          this.searchTreeListZd(this.checkTreeID)
          this.$message.success(res.message);
      } else {
        console.log(res)
          this.$message.error(res.message);
      }
      
    },
    //新增
    async addZdInfo(){
      this.$resetForm("sxForm", this.sxForm); //清空表单数据
      this.isUpdate = false;
      this.isAdd = true;
      this.sxForm={};
    },

    async saveZdInfo(){
      this.sxForm.bbid = this.checkTreeID;
      if(this.sxForm.szgs == ''){
        this.sxForm.szgs = '1'
      }
      let res = await infoApi.add(this.sxForm);
      if (res.success) {
        this.$resetForm("sxForm", this.sxForm); //清空表单数据
        this.searchTreeListZd(this.checkTreeID);
        this.searchListZd(this.checkTreeID);
        
          this.$message.success(res.message);
      } else {
        console.log(res)
          this.$message.error(res.message);
      }
    }

    //取消修改
    // cancelUpdate(){
    //   console.log(this.initData);
    //   this.sxForm = this.initData;
    // },


  },

};
</script>

  <style lang="scss" scoped>
  .box {
    height: 100%;
  }

  .bg-white {
    background: #ffffff;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    padding: 20px;
    border-radius: 4px;
    min-height: 100vh;
  }
  .grid-content1 {
    padding: 20px 5px 20px 0;
    border-radius: 4px;
    min-height: 100vh;
  }
  .grid-content2 {
    padding: 20px 0px 20px 10px;
    border-radius: 4px;
    min-height: 100vh;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-tree {
    position: relative;
    cursor: default;
    background: #e5e9f2;
    color: #424344;
  }

  .table{
    // border-collapse: collapse;
  }
  .table .tr .td{
    padding: 10px;
  }
  
  .titlestyle{
    background: #d3dce6;
    text-align: center;
  }
  .contentstyle{
    background: #e5e9f2;
    text-align: center;
  }

  .mydiv{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
    
  </style>